<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
<body>
<div class="Top">
    <ul style="width: 300px;">
        <li><a th:href="@{/index/food}">首页</a></li>
        <li><a th:href="@{/index/hotFood}">热门</a></li>
        <li><a th:href="@{/index/evaluate}">用户评价</a></li>
    </ul>
    <ul style="width: 500px;">
        <li style="text-align: end;" th:if="${session.loginUser == null or session.loginUser == ''}"><a th:href="@{/login/toUserLogin}">登录</a></li>
        <li style="text-align: end;" th:if="${session.loginUser == null or session.loginUser == ''}"><a th:href="@{/login/toRegister}">注册</a></li>
        <li th:if="${session.loginUser != null and session.loginUser != ''}" class="Yonghu" style="position: relative;height: 34px;left: 30px;line-height: 34px;">当前用户：<span th:if="${session.loginUser != null and session.loginUser != ''}" th:text="${session.loginUser.ofUserName}" /> <img th:src="@{/images/jianto.png}" alt="" style="width: 16px;margin-left: 10px;margin-bottom: -2.8px;">
            <div class="yonghu">
                <a th:href="@{/index/personal}">个人中心</a>
                <a th:href="@{/order/toOrder}">我的订单</a>
                <a th:href="@{/login/exitLogin}">退出登录</a>
            </div>
        </li>
        <li style="text-align: end;"><a th:href="@{/order/toCart}">购物车</a></li>
        <li style="text-align: end;"><a th:href="@{/login/toAdmin}" target="_blank">后台管理</a></li>
    </ul>
</div>
<div class="Top2">
    <div style="width: 100%;">
        <div class="center" style="width: 80%; margin: 0 auto;height: 120px;">
            <img th:src="@{/images/logo2.jpeg}" alt="" width="144px" style="float: left;">

            <div class="theme">
                <i>夏日美食</i>
            </div>

            <div style="float: right;margin-right: 150px;margin-top: 34px;">
                <i style="float: left;"><input class="input" name="search" id="search" type="text"></i>
                <i class="ione"><input type="image" name="submit" th:src="@{/images/search2.png}" width="25" height="25"></i>
            </div>
        </div>
        <i style="display: block;border-bottom: 2px solid rgb(13, 13, 13,0.45);width: 100%;margin: 0 auto;"></i>
        <div style="width: 80%; margin: 0 auto;">
            <ul style="display: flex;">
                <li style="flex: 1;text-align: center;line-height: 50px;"><a style="color:coral;" th:href="@{/index/food}">首页</a></li>
                <li style="flex: 1;text-align: center;line-height: 50px;"><a th:href="@{/index/hotFood}">热门</a></li>
                <li style="flex: 1;text-align: center;line-height: 50px;"><a th:href="@{/index/evaluate}">用户评价</a></li>
                <li style="flex: 1;text-align: center;line-height: 50px;"><a href="https://gitee.com/">关于我们</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="core">
    <div class="coreL" style="width: 25%;height: 100%;float: left;box-sizing: border-box;">
        <div style="border: 1px solid rgb(206,206,206);box-shadow: 0px 3px 4px 0 #888888;width: 98%;text-align: center;height: 12%;line-height: 43px;">
            营业时间：周一至周六：6:00-24:00
        </div>
        <img th:src="@{/images/shizhong.jpeg}" alt=""
             style="float: left;width: 98%;border: 1px solid rgb(206,206,206);margin-top: 3px;height: 86%;">
    </div>
    <div class="coreC" style="width: 50%;height: 100%;margin: auto;box-sizing: border-box;float: left;">
        <div class="box">
            <div class="box-img"><img th:src="@{/images/huado9.jpg}" style="width: 100%;height: 100%;"></div>
            <div class="box-img"><img th:src="@{/images/huado3.jpg}" style="width: 100%;height: 100%;"></div>
            <div class="box-img"><img th:src="@{/images/huado4.jpg}" style="width: 100%;height: 100%;"></div>
            <div class="box-img"><img th:src="@{/images/huado5.jpg}" style="width: 100%;height: 100%;"></div>
            <div class="box-img"><img th:src="@{/images/huado6.jpg}" style="width: 100%;height: 100%;"></div>
            <div class="box-img"><img th:src="@{/images/huado1.jpg}" style="width: 100%;height: 100%;"></div>
            <div class="box-zhiding">
                <ul>
                    <li class="botton"></li>
                    <li class="botton"></li>
                    <li class="botton"></li>
                    <li class="botton"></li>
                    <li class="botton"></li>
                    <li class="botton"></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
        <script type="text/javascript">
            $(function () {
                var index = 0;//标记当前图片索引
                var f;
                dingshiqi();

                function dingshiqi() {
                    f = setInterval(function () {
                        if (index == $(".box-img").length - 1) {
                            index = 0;
                            $(".box-img").css("opacity", "0");
                            $(".box-img").eq(index).css("opacity", "1");
                            $(".botton").css("background-color", "#ccc");
                            $(".botton").eq(index).css("background-color", "#fff");
                        } else {
                            index++;
                            $(".box-img").css("opacity", "0");
                            $(".box-img").eq(index).css("opacity", "1");
                            $(".botton").css("background-color", "#ccc");
                            $(".botton").eq(index).css("background-color", "#fff");
                        }
                    }, 3000)
                }

                $(".box-left").click(function () {
                    clearInterval(f);
                    if (index == 0) {
                        index = $(".box-img").length - 1;
                        $(".box-img").css("opacity", "0");
                        $(".box-img").eq(index).css("opacity", "1");
                        $(".botton").css("background-color", "#ccc");
                        $(".botton").eq(index).css("background-color", "#fff");
                        dingshiqi();
                    } else {
                        index--;
                        $(".box-img").css("opacity", "0");
                        $(".box-img").eq(index).css("opacity", "1");
                        $(".botton").css("background-color", "#ccc");
                        $(".botton").eq(index).css("background-color", "#fff");
                        dingshiqi();
                    }
                })
                $(".box-right").click(function () {
                    clearInterval(f);
                    if (index == $(".box-img").length - 1) {
                        index = 0;
                        $(".box-img").css("opacity", "0");
                        $(".box-img").eq(index).css("opacity", "1");
                        $(".botton").css("background-color", "#ccc");
                        $(".botton").eq(index).css("background-color", "#fff");
                        dingshiqi();
                    } else {
                        index++;
                        $(".box-img").css("opacity", "0");
                        $(".box-img").eq(index).css("opacity", "1");
                        $(".botton").css("background-color", "#ccc");
                        $(".botton").eq(index).css("background-color", "#fff");
                        dingshiqi();
                    }
                })

                $(".botton").click(function () {
                    clearInterval(f);
                    var indexx = $(this).index();
                    index = indexx;
                    $(".box-img").css("opacity", "0");
                    $(".box-img").eq(index).css("opacity", "1");
                    $(".botton").css("background-color", "#ccc");
                    $(".botton").eq(index).css("background-color", "#fff");
                    dingshiqi();
                })

            })
        </script>
    </div>
    <div class="coreR" style="width: 25%;height: 100%;float: right;box-sizing: border-box;">
        <div style="border: 1px solid rgb(206,206,206);box-shadow: 0px 3px 4px 0 #888888;width: 98%;float: right;height: 12%;line-height: 43px;text-align: center;">
            公告栏
        </div>
        <div class="noticeList" style="float: right;width: 98.6%;border: 1px solid rgb(206,206,206);margin-top: 3px;height: 86%;font-size:14px ;padding: 5px;box-sizing: border-box;overflow:auto"></div>
    </div>
</div>
<div class="Fbox" style="width: 80%;margin: 0 auto;">
    <div class="box">
        <div id="tab" class="tab"></div>
        <div class="cent" style="display: inline-block;margin-bottom: 50px;"></div>
    </div>
</div>
<div class="Footer">

    <div class="ffirst">
        <div>
            <i></i>
            <p>预约服务</p>
        </div>
        <div>
            <i></i>
            <p>退餐明示</p>
        </div>
        <div>
            <i></i>
            <p>免费赠品</p>
        </div>
        <div>
            <i></i>
            <p>满50元折扣</p>
        </div>
        <div>
            <i></i>
            <p>其它网店</p>
        </div>
    </div>
    <div class="Fsecond">
        <div class="fsecond-l">
            <div class="fsecond">
                <p>帮助中心</p>
                <ul>
                    <li>账户管理</li>
                    <li>订餐指南</li>
                    <li>订单操作</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>服务支持</p>
                <ul>
                    <li>售后政策</li>
                    <li>自助服务</li>
                    <li>相关下载</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>线下门店</p>
                <ul>
                    <li>美食之家</li>
                    <li>服务网点</li>
                    <li>授权体验店</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>关于美食</p>
                <ul>
                    <li>了解美食</li>
                    <li>加入美食</li>
                    <li>订投资者关系</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>关注我们</p>
                <ul>
                    <li>新浪微博</li>
                    <li>官方微信</li>
                    <li>联系我们</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>特色服务</p>
                <ul>
                    <li>F码通道</li>
                    <li>礼物码</li>
                    <li>防伪查询</li>
                </ul>
            </div>
        </div>
        <div class="fsecond-R">
            <h2>400-100-5678</h2>
            <p>8:00-18:00(仅收市话费)</p>
            <div class="worker">
                <p>人工客服</p>
            </div>
            <div class="mi">关注夏日:
                <i><img th:src="@{/images/wb.png}" alt="" style="width: 45px;"></i>
                <i><img th:src="@{/images/wx.png}" alt=""></i>
            </div>
        </div>
    </div>
    <div class="Ffinaly">
        <div class="ffinaly">
            <img th:src="@{/images/erweima.png}" style="position: absolute;width: 79px;margin-left: 1093px;">
            <div class="one">
                <ul>
                    <li>夏日美食</li>
                    <li>MEISHI</li>
                    <li>服务</li>
                    <li>菜谱</li>
                    <li>有品</li>
                    <li>食材开放平台</li>
                    <li>活动</li>
                    <li>资质证照</li>
                    <li>政企服务</li>
                    <li>线下店</li>
                    <li>店铺安全隐私政策</li>
                    <li>食品安全隐私政策</li>
                    <li>夏日美食用户协议</li>
                    <li>问题反馈</li>
                </ul>
            </div>
            <div class="two">
                <p>
                    <a href="">© mi.com</a>
                    <a href="">京ICP证110507号</a>
                    <a href="">京ICP备10046444号</a>
                    <a href="">京公网安备11010802020134号</a>
                    <a href="">京网文[2020]0276-042号</a>
                </p>
                <p>
                    <a href="">（京）网械平台备字（2018）第00005号</a>
                    <a href="">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
                    <a href="">营业执照</a>
                    <a href="">医疗器械公告</a>
                </p>
                <p>
                    <a href="">增值电信业务许可证 </a>
                    <a>网络食品经营备案京食药网食备202010048 </a>
                    <a href="">食品经营许可证</a>
                </p>
                <p>
                    <a>违法和不良信息举报电话：171-5104-4404</a>
                    <a href="">知识产权侵权投诉</a>
                    <a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script>
    // 选项卡跳转
    function tab(i) {
        var divAll = document.querySelectorAll('.tab div');
        var centAll = document.querySelectorAll('.cent .cents');
        divAll.forEach(function (ele, inx) {
            if (inx == i) {
                divAll[inx].className = 'xuanxiangka'
            } else {
                divAll[inx].className = ''
            }
        });
        centAll.forEach(function (item, ii) {
            if (ii == i) {
                centAll[ii].style.display = 'flex'
            } else {
                centAll[ii].style.display = 'none'
            }
        });
    };

    $.ajax({
        url:"../../category/categoryList",
        type:'post',
        success:function (data) {
            if (data.code == '200'){
                for (var i=0;i<data.data.length;i++){
                    $('#tab').append('<div onclick="tab('+i+')" class="xuanxiangka">'+data.data[i].ofCategoryName+'</div>')
                    if (i==0){
                        $('.cent').append('<div id="cents'+data.data[i].ofCategoryId+'" class="cents"></div>')
                    }else {
                        $('.cent').append('<div id="cents'+data.data[i].ofCategoryId+'" class="cents" style="display: none;"></div>')
                    }
                }
            }else {
                alert(data.msg);
            }
        },
        error:function (error) {
            alert("读取失败！");
        }
    });

    $.ajax({
        url:"../../food/foodList",
        type: 'post',
        data:JSON.stringify({hots:0}),
        dataType: 'json', // 返回数据的格式, 通常为JSON
        contentType: 'application/json',
        success:function (data) {
            if (data.code == '200'){
                for (var i=0;i<data.data.length;i++){
                    $('#cents'+data.data[i].ofFoodCategory+'').append('<div class="cent-1"><div class="img"><a href="/food/foodDetail?foodId='+data.data[i].ofFoodId+'"><img src="/images/'+data.data[i].ofFoodPicture+'" alt=""></a></div><div class="cents-1"><p>'+data.data[i].ofFoodName+'</p><i>'+data.data[i].ofFoodDescribe+'</i></div><div class="cents-11"><p>'+data.data[i].ofFoodPrice+'元</p><div class="login"><p>点餐</p></div> </div> </div>')
                }
            }else {
                alert(data.msg);
            }
        },
        error:function (error) {
            alert("读取失败！");
        }
    });

    $.ajax({
        url:"../../notice/noticeList",
        type: 'post',
        success:function (data) {
            if (data.code == '0'){
                for (var i=0;i<data.data.length;i++){
                    $('.noticeList').append('<div class="notice" style="border-bottom: 2px solid rgb(13, 13, 13,0.04);padding: 5px 0;">\n' +
                        '                <p>标题：'+data.data[i].ofNoticeTitle+'</p>\n' +
                        '                <p>内容：'+data.data[i].ofNoticeContent+'</p>\n' +
                        '                <p>时间：'+data.data[i].ofNoticeTime+'</p>\n' +
                        '            </div>')
                }
            }else {
                alert(data.msg);
            }
        },
        error:function (error) {
            alert("读取失败！");
        }
    });

</script>
</body>
</html>